<template>
  <j-editable-table
    ref="editableTable"
    :loading="loading"
    :columns="columns"
    :dataSource="dataSource"
    :rowNumber="true"
    :rowSelection="true"
    :maxHeight="319"
    :actionButton="true"
  />
</template>
<script>
import JEditableTable from '@/components/jeecg/JEditableTable'
import { FormTypes } from '@/utils/JEditableTableUtil'
const commonPageOptions = [
  { title: '文本框', value: 'text' },
  { title: '日期(yyyy-MM-dd)', value: 'date' },
  { title: '日期（yyyy-MM-dd HH:mm:ss）', value: 'datetime' },
  { title: '下拉框', value: 'list' },
  { title: '下拉多选框', value: 'list_multi' },
  { title: '下拉搜索框', value: 'sel_search' },
  { title: '分类字典树', value: 'cat_tree' },
  { title: 'Popup弹框', value: 'popup' },
  { title: '部门选择', value: 'sel_depart' },
  { title: '用户选择', value: 'sel_user' },
  { title: '省市区组件', value: 'pca' },
  { title: '自定义树控件', value: 'sel_tree' }
]
export default {
  name: 'GraphreportQueryConfig',
  components: {
    JEditableTable
  },
  data() {
    return {
      loading: false,
      columns: [
        {
          title: '字段名',
          align: 'center',
          key: 'field',
          width: '120px',
          type: FormTypes.input,
          defaultValue: '',
          placeholder: '',
          validateRules: [{ required: true, message: '${title}不能为空' }]
        },
        {
          title: '字段文本',
          align: 'center',
          key: 'label',
          width: '120px',
          type: FormTypes.input,
          defaultValue: '',
          placeholder: '',
          validateRules: [{ required: true, message: '${title}不能为空' }]
        },
        {
          title: '控件类型',
          align: 'center',
          key: 'viewType',
          width: '200px',
          defaultValue: '',
          type: FormTypes.select,
          options: commonPageOptions,
          validateRules: [{ required: true, message: '${title}不能为空' }]
        },
        {
          title: '查询类型',
          key: 'mode',
          width: '110px',
          type: FormTypes.select,
          options: [
            { title: '普通查询', value: 'single' },
            { title: '范围查询', value: 'group' }

          ],
          defaultValue: 'single',
          placeholder: '请选择${title}',
          validateRules: [{ required: true, message: '请选择${title}' }]
        },
        {
          title: '字典Table',
          align: 'center',
          key: 'dictTable',
          width: '200px',
          type: FormTypes.input_pop,
          defaultValue: '',
          placeholder: ''
        },
        {
          title: '字典Code',
          align: 'center',
          key: 'dictCode',
          width: '200px',
          type: FormTypes.input,
          defaultValue: '',
          placeholder: ''
        },
        {
          title: '字典Text',
          align: 'center',
          key: 'dictText',
          width: '200px',
          type: FormTypes.input,
          defaultValue: '',
          placeholder: ''
        },
        {
          title: '默认值',
          align: 'center',
          key: 'defValue',
          width: '200px',
          type: FormTypes.input,
          defaultValue: '',
          placeholder: ''
        },
        {
          title: '是否启用',
          align: 'center',
          key: 'config',
          width: '100px',
          type: FormTypes.checkbox,
          defaultValue: '1',
          customValue: ['1', '0'],
          defaultChecked: false
        }
      ]
    }
  },
  props: {
    dataSource: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    getValuesSync() {
      return this.$refs.editableTable.getValuesSync({
        validate: true
      })
    }
  }
}
</script>
